<template>
  <custom-modal-page :visible.sync="visible">
    <div class="beam-layout-container">
      <div class="screen-conditions-container">
        <ScreenConditions :isDataType="false">
          <template slot="conditions">
            <bjRangeCalendar
              format="YYYY-MM-DD HH:mm:ss"
              valueFormat="YYYY-MM-DD HH:mm:ss"
              v-model="condition.defaultTime"
              @ok="calendarOk"
              @change="calendarChange"
              :showTime="{ format: 'HH:mm:ss', hideDisabledOptions: false }"
            ></bjRangeCalendar>
          </template>
          <template slot="operate">
            <a-button type="primary" @click="search()"> 查询 </a-button>
            <a-button class="back-button" @click="goBack()"> 返回 </a-button>
          </template>
        </ScreenConditions>
      </div>
      <div class="beam-table-container">
        <div class="table-header" header="预警推送">
          <div>
            <a-button type="primary" @click="allRead()"> 全部已读 </a-button>
            <a-button type="primary" @click="gotoRead(1)"> 批量已读 </a-button>
          </div>
        </div>
        <div class="main" v-loading="loading">
          <vxe-table
            ref="xTable"
            height="99%"
            class="scrollbarStyle"
            align="center"
            show-overflow
            show-header-overflow
            :data="tableData"
            :column-config="{ resizable: true }"
            @checkbox-all="selectAllEvent"
            @checkbox-change="selectChangeEvent"
          >
            <vxe-column type="checkbox" width="60"></vxe-column>
            <vxe-column type="seq" width="80" title="序号"></vxe-column>
            <vxe-column
              show-overflow
              :key="index"
              :title="item.title"
              :field="item.key"
              :width="item.width"
              v-for="(item, index) in columns"
            >
              <template #default="{ row }">
                <div v-if="item.key == 'pushResult'">
                  <span :class="[checkResult(row)]">
                    {{ row.pushResult }}
                  </span>
                </div>
                <div v-else>{{ row[item.key] }}</div>
              </template>
            </vxe-column>
            <vxe-column
              field="operate"
              width="140"
              title="操作"
              fixed="right"
              align="left"
            >
              <template #default="{ row }">
                <div class="text-button-group">
                  <a-button type="link" @click="gotoDetail(row)">
                    查看
                  </a-button>
                  <a-button type="link" @click="gotoRead(2, row)">
                    已读
                  </a-button>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <div class="pager-container">
          <vxe-pager
            background
            :current-page.sync="pager.page"
            :page-size.sync="pager.pageSize"
            :total="pager.total"
            :layouts="[
              'PrevPage',
              'JumpNumber',
              'NextPage',
              'Sizes',
              'FullJump',
            ]"
            @page-change="paginationChange"
          >
            <template #left>
              <div class="vxe-pager-left-tip-container">
                第<span>1</span>到<span
                  >{{ Math.ceil(pager.total / pager.pageSize) || 1 }}页 </span
                >共<span>{{ pager.total }}</span
                >条记录
              </div>
            </template>
          </vxe-pager>
        </div>
      </div>
      <!--  -->
      <detailModal
        :visible.sync="detailModal.visible"
        :id="detailModal.id"
      ></detailModal>
    </div>
  </custom-modal-page>
</template>

<script>
import bjRangeCalendar from "@/components/bj-range-calendar";
import { notificationTip } from "@/utils";
import detailModal from "./detailModal.vue";
import {
  getLMDWarning,
  setAllRead,
  setPartRead,
} from "@/api/wisdom-beam/collect-app.js";
export default {
  components: {
    bjRangeCalendar,
    detailModal,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    equCode: {
      type: String,
      default: "",
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
          this.condition.equCode = this.equCode;
          this.getTableData();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      detailModal: {
        visible: false,
        id: "",
      },
      condition: {
        //设备
        equCode: "",
        //时间
        defaultTime: [],
      },
      loading: false,
      columns: [
        {
          title: "推送内容",
          key: "pushComment",
        },
        {
          title: "推送类型",
          key: "pushType",
          width: 180,
        },
        {
          title: "推送时间",
          key: "createTime",
          width: 180,
        },
        {
          title: "接收人",
          key: "recipientUser",
        },
        {
          title: "推送方式",
          key: "",
          width: 180,
        },
        {
          title: "推送结果",
          key: "pushResult",
          width: 180,
        },
      ],
      tableData: [],
      pager: {
        page: 1,
        pageSize: 10,
        total: 0,
      },
      choiceData: [],
    };
  },
  methods: {
    checkResult(row) {
      let { pushResult = "" } = row;
      if (!pushResult) {
        return;
      }
      if (pushResult.includes("成功")) return "success";
      else return "error";
    },

    //详情
    gotoDetail(row = {}) {
      let { specialLmdId } = row;
      this.detailModal.id = specialLmdId;
      this.detailModal.visible = true;
    },

    //全选
    selectAllEvent(e) {
      let { records } = e;
      this.choiceData = records;
    },
    //多选
    selectChangeEvent(e) {
      let { records } = e;
      this.choiceData = records;
    },
    //全部已读
    allRead() {
      let that = this;
      let { equCode } = that.condition;
      let dataLength = that.tableData.length;
      const h = this.$createElement;
      this.$confirm({
        title: "您确定是否进行已读操作?",
        content: "",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#faad14",
          }),
        onOk() {
          setAllRead({ equCode })
            .then((res) => {
              notificationTip("success", "操作成功！");
              if (dataLength == 1 && that.pager.page > 1) {
                that.pager.page -= 1;
              }
              that.getTableData();
            })
            .catch();
        },
        onCancel() {},
      });
    },

    //已读
    gotoRead(type = 1, row) {
      let that = this;
      let { tableData, choiceData } = that;
      let dataLength = tableData.length;
      const h = this.$createElement;
      let ids = [];
      //批量已读
      if (type == 1) {
        if (choiceData.length == 0) {
          return this.$message.warning("请先选择，预警信息！");
        }
        choiceData.forEach((v) => {
          ids.push(v.id);
        });
      }
      //单条已读
      if (type == 2) {
        ids.push(row.id);
      }
      this.$confirm({
        title: "您确定是否进行已读操作?",
        content: "",
        okText: "确定",
        okType: "primary",
        cancelText: "取消",
        centered: true,
        icon: () =>
          h("a-icon", {
            props: {
              type: "question-circle",
              theme: "filled",
            },
            style: "color:#faad14",
          }),
        onOk() {
          setPartRead({
            idLs: ids.toString(),
          })
            .then((res) => {
              notificationTip("success", "操作成功！");
              if (dataLength == 1 && that.pager.page > 1) {
                that.pager.page -= 1;
              }
              that.getTableData();
            })
            .catch();
        },
        onCancel() {},
      });
    },

    //查询列表
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let { equCode = "", defaultTime } = this.condition;
      getLMDWarning({
        equCode,
        startTime: defaultTime?.[0],
        endTime: defaultTime?.[1],
        page,
        pageSize,
      })
        .then((res) => {
          let { data } = res;
          this.tableData = data?.result?.rows || [];
          this.pager.total = data?.result?.total || 0;
        })
        .catch((err) => {
          this.tableData = [];
          this.pager.total = 0;
        })
        .finally((_) => {
          this.loading = false;
        });
    },
    //查询
    search() {
      this.pager.page = 1;
      this.getTableData();
    },
    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },
    calendarOk(dates = []) {
      this.condition.defaultTime = dates;
      this.search();
    },
    calendarChange(dates = []) {
      this.condition.defaultTime = dates;
      if (this.condition.defaultTime.length == 0) {
        this.search();
      }
    },
    goBack() {
      this.$emit("update:visible", false);
    },
  },
};
</script>

<style lang="less" scoped>
.back-button {
  color: var(--primary-color);
  background: #f1f2f7 !important;
  border: none;
  position: absolute;
  right: 20px;
}
.success {
  color: #4bc964;
}
.error {
  color: #ff3f4a;
}
</style>
